<template>
	<view class="msg-content">
		<view class="icon-box">
			<img class='img' :src="icon" alt="">
		</view>
		<view class="title">{{title}}</view>
		<view>
			<slot></slot>
		</view>
		<icon @click="cancel" class='cancel' type="cancel" color='#fff' size="30"/>
	</view>
</template>

<script>

	export default {

		props:{
			show:{
				type:Boolean,
				default:true
			},
			icon:{
				type:String,
				default:''
			},
			title:{
				type:String,
				default:''
			}
		},
		mounted() {
			console.log(this.title)
			console.log(this.icon)
		},
		methods:{
			cancel(){
				this.$emit('sendcancel')
			}
		}
	}
</script>

<style scoped>
.msg-content {
	background: #fff;
	border-radius: 8px;
	width: 100%;
	position: relative;
}
.icon-box {
	width: 200rpx;
	height: 200rpx;
	margin: 0 auto;
}
.img {
	width: 100%;
	height: 100%;
	display: inline-block;
	margin-top: -50rpx;
}
.title {
	font-size: 36rpx;
	font-weight: 600;
	text-align: center;
	margin-top: -50rpx;
}
.cancel {
	position: absolute;
	bottom: -30%;
	left: 50%;
	transform: translate(-50%);
}
</style>
